<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<style type="text/css">
			.active {
				width: 100px;
				height: 100px;
				border: red solid 1px;
			}
			.back{
				width: 100px;
				height: 100px;
				background: khaki;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--class-->
			<!--原生-->
			<div v-bind:class="{active:true,back:true}"></div>
			<!--对象-->
			<div v-bind:class="classObj"></div>
			<!--数组-->
			<div v-bind:class="[isActive ? 'active' : 'back']"></div>
			
			<!--style-->
			<div v-bind:style="styleObj"></div>
			<!--v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：-->
			<div v-bind:style="[styleObj, cusStyle]"></div>
			
			
			
		</div>
		
		
		
		
		
		
		<script src="js/vue.js" ></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					classObj: {
						active: true,
						back: true
					},
					isActive: true,
					styleObj: {
						width: '100px',
						height: '100px',
						border: 'blue solid 1px',
						borderRadius: '5px'
					},
					cusStyle: {
						background: '#ccc',
						transform: 'rotate(45deg)'
					}
				}
			});
			
			
		</script>
	</body>
</html>
